<template>
  <div class="role-manager-container">
    <div class="set-icon-header" style="padding: 24px 24px 0 24px">
      <el-form
        ref="form"
        label-position="left"
        :model="personManagerSearch"
        label-width="70px"
      >
        <el-row :gutter="15">
          <el-col :span="4">
            <el-form-item label="姓名：">
              <el-input v-model="personManagerSearch.loginName" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="用户名：">
              <el-input v-model="personManagerSearch.userName" />
            </el-form-item>
          </el-col>
<!--          <el-col :span="4">-->
<!--            <el-form-item label="手机号：">-->
<!--              <el-input v-model="personManagerSearch.phone" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="5">
            <el-form-item label="角色：">
              <el-input v-model="personManagerSearch.roleName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div style="position: relative;top: 5px;">
              <el-button
                type="primary"
                @click="queryMethods"
              >
                查询
              </el-button>
              <el-button
                type="primary"
                @click="addNewPersonMethods"
              >
                新增
              </el-button>
<!--              <el-button-->
<!--                type="danger"-->
<!--                @click="confirmMutiDel"-->
<!--                icon="el-icon-delete"-->
<!--              >-->
<!--                批量删除-->
<!--              </el-button>-->
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="set-icon-header">
      <CommonTable
        ref="userListRef"
        v-loading="isLoading"
        :is-selection="false"
        :is-show-index="true"
        :t-column-data="personManagerCol"
        :remote-api="getPersonList"
        :is-has-opera="true"
        :is-reserve-select="true"
        row-key="userId"
        operating-width="280px"
        @changeRow="changeSelectionList"
      >
        <template
          slot="operate"
          slot-scope="scope"
        >
          <div class="do-list" v-if="scope.row.userId !== 1">
          <span
            @click="editPersonDetail(scope.row)"
          >编辑</span>
            <span
              class="del-button"
              v-if="scope.row.userName !== '超级管理员'"
              @click="delPersonDetail(scope.row)"
            >删除</span>
          </div>
        </template>
      </CommonTable>
    </div>

<!--    <el-pagination-->
<!--      class="page-nation"-->
<!--      :current-page="personManagerSearch.page"-->
<!--      :page-sizes="[10, 20, 30, 40]"-->
<!--      :page-size="personManagerSearch.size"-->
<!--      layout="total, sizes, prev, pager, next, jumper"-->
<!--      :total="total"-->
<!--      @size-change="handleSizeChange"-->
<!--      @current-change="handleCurrentChange"-->
<!--    />-->

    <el-dialog
      :title="addPersonModel.userId?'编辑用户':'新增用户'"
      :visible.sync="isShowAddPerson"
      :close-on-click-modal="false"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        v-if="isShowAddPerson"
        ref="addUsersForm"
        :model="addPersonModel"
        :rules="usersAddrules"
        label-width="80px"
      >
        <el-form-item
          label="姓名"
          prop="userName"
        >
          <el-input :disabled="isCanEdit" v-model="addPersonModel.userName" />
        </el-form-item>
        <el-form-item
          label="用户名"
          prop="loginName"
        >
          用于登录使用
          <el-input
            v-model.trim="addPersonModel.loginName"
            :disabled="isCanEdit"
            placeholder=""
            maxlength="11"
            show-word-limit
          />
        </el-form-item>

        <el-form-item
          label="二维码"
          prop="qrcode"
          v-if="users.target === 'platform'"
        >
          <el-upload
            class="avatar-uploader"
            action=""
            accept=".jpg,.png,.jpeg,.JPG,.PNG,.JPEG"
            :show-file-list="false"
            :http-request="
              (file) => {
                this.uploadBg(file);
              }
            "
          >
            <i
              v-if="!addPersonModel.qrcode"
              slot="default"
              class="el-icon-plus avatar-uploader-icon"
            ></i>
            <img v-else class="avatar" :src="addPersonModel.qrcode" alt="" />
          </el-upload>
        </el-form-item>

<!--        <el-form-item-->
<!--          label="手机号"-->
<!--          prop="phone"-->
<!--        >-->
<!--          <el-input-->
<!--            v-model.trim="addPersonModel.phone"-->
<!--            maxlength="11"-->
<!--            show-word-limit-->
<!--          />-->
<!--        </el-form-item>-->
        <el-form-item label="角色" prop="roleId">
          <el-select
            v-model="addPersonModel.roleId"
            class="add-person-input"
            placeholder="请选择"
            :disabled="isCanEdit"
          >
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="passWord"
        >
          <el-input
            v-model="addPersonModel.passWord"
            minlength="5"
            maxlength="50"
            show-word-limit
            :type="passwordType?'password': 'text'"
          >
            <template slot="suffix">
              <i
                class="el-input__icon el-icon-view"
                @click="showPwd('passwordType')"
              />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="确认密码"
          prop="confirmPassword"
        >
          <el-input
            v-model="addPersonModel.confirmPassword"
            :type="confirmPasswordType?'password': 'text'"
          >
            <template slot="suffix">
              <i
                class="el-input__icon el-icon-view"
                @click="showPwd('confirmPasswordType')"
              />
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button type="default" @click="handleClose">取 消</el-button>
        <el-button
          type="primary"
          @click="addNewUserMethods"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!--项目分配-->
    <el-dialog
      :title="'人员分配-' + usersClickCache.roleName"
      :visible.sync="isShowGiveRoleAuth"
      width="70%"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div class="give-role-auth-container">
        <div>
          <div class="give-title">
            可选列表
          </div>
          <el-input
            v-model="searchCanSelect"
            placeholder="请输入姓名或者手机号"
            suffix-icon="el-icon-search"
            @input="changeSearchCanSelect"
          />
          <el-table
            ref="multipleTable"
            border
            class="selection-table"
            :data="unallocatedDataList"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleCanSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              prop="nickName"
              label="姓名"
              width="120"
            />
            <el-table-column
              prop="userName"
              label="用户名"
              width="120"
            />
<!--            <el-table-column-->
<!--              prop="phone"-->
<!--              label="手机号"-->
<!--              width="120"-->
<!--            />-->
          </el-table>
        </div>
        <div>
          <div class="chanshuo-arrow-row">
            <div>
              <el-button @click="changeClassToSelected('selected')" type="primary">分配角色 ></el-button>
            </div>
<!--            <img @click="changeClassToSelected('selected')" src="@/assets/chuansuo_right_keyong@2x.png" alt="">-->
            <div>
              <el-button @click="changeClassToSelected('unSelect')" type="primary">< 取消角色</el-button>
            </div>
<!--            <img @click="changeClassToSelected('unSelect')" src="@/assets/chuansuo_left_keyong@2x.png" alt="">-->
          </div>

<!--          <div-->
<!--            class="icon-big el-icon-right"-->
<!--            @click="changeClassToSelected('selected')"-->
<!--          />-->
<!--          <div-->
<!--            class="icon-big el-icon-back"-->
<!--            @click="changeClassToSelected('unSelect')"-->
<!--          />-->
        </div>
        <div>
          <div class="give-title">
            已选列表
          </div>
          <el-input
            v-model="searchHasCanSelect"
            placeholder="请输入姓名或者手机号"
            suffix-icon="el-icon-search"
            @input="changeSearchHasSelect"
          />
          <el-table
            ref="multipleTable"
            border
            class="selection-table"
            :data="allocatedDataList"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleHasSelectedChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              prop="nickName"
              label="姓名"
              width="120"
            />
            <el-table-column
              prop="userName"
              label="用户名"
              width="120"
            />
<!--            <el-table-column-->
<!--              prop="phone"-->
<!--              label="手机号"-->
<!--              width="120"-->
<!--            />-->
          </el-table>
        </div>

        <div class="float-ryfp-tips">
          注意：每个人员只能同时使用一种角色权限，分配新的角色权限将自动失去原来的角色权限
        </div>

      </div>
      <span
        slot="footer"
        class="dialog-footer"
        style="position: relative;width: 100%;"
      >
        <el-button type="plan" @click="handleClose">取 消</el-button>
        <el-button
          type="primary"
          @click="confirmGiveRoleConfig"
        >确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="addRoleModel.roleId?'角色编辑': '角色新增'"
      :visible.sync="isShowAddRole"
      width="30%"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-form
        ref="roleModelForm"
        :model="addRoleModel"
        label-width="80px"
      >
        <el-form-item
          label="角色名称"
          prop="roleName"
        >
          <el-input
            :disabled="true"
            v-model.trim="addRoleModel.roleName"
            show-word-limit
            maxlength="30"
          />
        </el-form-item>
        <el-form-item
          label="角色权限"
          prop="menuIds"
        >
          <el-tree
            :disabled="true"
            ref="menuTree"
            :data="treeData"
            show-checkbox
            node-key="id"
            :default-expanded-keys="hasCheckedTree"
            :check-strictly="ischeckStrictly"
            :props="defaultProps"
          />
        </el-form-item>
        <el-form-item
          label="角色描述"
          prop="roleDesc"
        >
          <el-input
            :disabled="true"
            v-model.trim="addRoleModel.roleDesc"
            show-word-limit
            maxlength="30"
          />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button type="plan" @click="handleClose">取 消</el-button>
        <el-button
          type="primary"
          @click="handleClose"
        >确 定</el-button>
      </span>
    </el-dialog>

    <WarnPanelDialog
      :status-prop="isShowWarning"
      warnContent="是否删除该用户"
      @confirmHandler="confirmMethods"
      @cancelHandler="cancelMethods"
    />
  </div>
</template>
<script>
import CommonTable from '@/components/Table/commonTable'
import { personManagerCol } from './tableCol/personManagerCol'
import WarnPanelDialog from '@/components/WarnPanelDialog/index'
import * as service from './service'
import md5 from 'js-md5'
import {getPermissionIds, getRoleTree} from "./service";
import * as commonApi from "@/api/common";
import {target} from "@/utils/config";

export default {
  components: {
    CommonTable,
    WarnPanelDialog
  },
  data() {
    return {
      isCanEdit: false,
      ischeckStrictly: false,
      isShowGiveRoleAuth: false,
      isLoading: false,
      passwordType: true,
      confirmPasswordType: true,
      roleList: [],
      personManagerList: [],
      personManagerCol,
      personManagerSearch: {
        userName: '',
        loginName: '',
        roleName: '',
      },
      clickRoleName: '',
      treeData: [],
      unallocatedDataList: [],
      unallocatedDataListHistory: [],
      allocatedDataList: [],
      allocatedDataListHistory: [],
      canSelectionList: [],
      hasSelectedList: [],
      addPersonModel: {
        loginName: '',
        passWord: '',
        qrcode: '',
        userName: '',
        roleId: '',
        phone: '',
        confirmPassword: ''
      },
      hasCheckedTree: [],
      roleManagerList: [],
      addRoleModel: {
        menuIds: [],
        roleName: '',
        roleDesc: ''
      },
      total: 0,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      personClickCache: {},
      isShowWarning: false,
      isShowAddPerson: false,
      getPersonList: service.getPersonList,
      usersAddrules: {
        userName: [
          { required: true, message: '请输入姓名', trigger: 'change' }
        ],
        loginName: [
          { required: true, message: '请输入用户名', trigger: 'change' }
        ],
        qrcode: [
          { required: true, message: '请上传二维码', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'change' }
        ],
        roleId: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ],
        passWord: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ],
        confirmPassword: [
          { required: true, message: '请输入确认密码', trigger: 'change' }
        ]
      },
      delPersonList: [],
      searchHasCanSelect: '',
      searchCanSelect: '',
      usersClickCache: {},
      isShowAddRole: false,
      users: {}
    }
  },
  mounted() {
    console.log('初始化')
    const users = window.localStorage.getItem(`users-${target}`)
    if(users) {
      this.users = JSON.parse(users)
    }
    this.getMenuList()
    this.getRoleList()
    this.getPersonDataList()
    this.getTreeList()
  },
  methods: {
    getTreeList() {
      service.getRoleTree({}).then((res) => {
        console.log('res.data ---', res)
      })
    },
    uploadBg(file) {
      const maxSize = 2 * 1024 * 1024;
      if (file.file.size <= maxSize) {
        this.$ossOtherSCJTUpload(file).then((res) => {
          if (res?.res.status === 200) {
            commonApi.accessFile(res?.name).then((res) => {
              this.addPersonModel.qrcode = res.data
              setTimeout(() => {
                this.$refs["addUsersForm"].validateField("qrcode");
              }, 200);
            });
          } else {
            this.$message.warning("文件上传失败");
          }
        });
      } else {
        this.$message.error("文件大小不能超过2M");
      }
    },
    getMenuList() {
      service.getMenuList({}).then((res) => {
        res.data.forEach((item) => {
          if(item.label === '会议列表') {
            item.children = [{...item.children[0]}]
          }
        })
        res.data.forEach((item) => {
          item.disabled = true
          if(item.children) {
            item.children.forEach((child) => {
              child.disabled = true
            })
          }
        })
        this.treeData = res.data.slice()
      })
    },
    lookRoleMenu(row) {
      const params = {
        roleId: row.roleId
      }
      this.hasCheckedTree = []
      this.isLoading = true
      service.getRoleDetail(params).then((res) => {
        this.isLoading = false
        this.hasCheckedTree = res.data.menuIds.slice()
        this.ischeckStrictly = true
        this.$nextTick(() => {
          this.$refs.menuTree.setCheckedKeys(res.data.menuIds) //给树节点赋值
          this.ischeckStrictly = false
        })
        this.addRoleModel.roleName = res.data.roleName
        this.addRoleModel.roleDesc = res.data.roleDesc
        this.addRoleModel.roleId = res.data.roleId
        this.addRoleModel.menuIds = res.data.menuIds.slice()
        this.isShowAddRole = true
      })
    },
    changeSearchHasSelect(val) {
      if (val === '') {
        this.allocatedDataList = this.allocatedDataListHistory.slice()
      } else {
        const tmpArr = []
        this.allocatedDataList.forEach((item) => {
          if (item.userName.indexOf(val) !== -1) {
            tmpArr.push(item)
          }
        })
        if(tmpArr.length === 0) {
          this.allocatedDataList.forEach((item) => {
            if (item.phone.indexOf(val) !== -1) {
              tmpArr.push(item)
            }
          })
        }
        this.allocatedDataList = tmpArr.slice()
      }
    },
    changeSearchCanSelect(val) {
      if (val === '') {
        this.unallocatedDataList = this.unallocatedDataListHistory.slice()
      } else {
        const tmpArr = []
        this.unallocatedDataList.forEach((item) => {
          if (item.userName.indexOf(val) !== -1) {
            tmpArr.push(item)
          }
        })
        if(tmpArr.length === 0) {
          this.unallocatedDataList.forEach((item) => {
            if (item.phone.indexOf(val) !== -1) {
              tmpArr.push(item)
            }
          })
        }
        this.unallocatedDataList = tmpArr.slice()
      }
    },
    changeClassToSelected(type) {
      if (type === 'selected') {
        this.allocatedDataList = new Set([...this.canSelectionList, ...this.allocatedDataList])
        this.allocatedDataList = [...this.allocatedDataList].slice()
        this.allocatedDataListHistory = [...this.allocatedDataList].slice()
        this.allocatedDataList.splice(0, 0)
        this.unallocatedDataList.splice(0, 0)

        // 删除选中数据
        this.canSelectionList.forEach((item) => {
          const findIndex = this.unallocatedDataList.findIndex((result) => {
            return result.userId === item.userId
          })
          if (findIndex !== -1) {
            this.unallocatedDataList.splice(findIndex, 1)
          }
        })
      }

      if(type === 'unSelect') {
        this.unallocatedDataList = new Set([...this.hasSelectedList, ...this.unallocatedDataList])
        this.unallocatedDataList = [...this.unallocatedDataList].slice()
        this.unallocatedDataList.splice(0, 0)
        this.allocatedDataList.splice(0, 0)

        this.unallocatedDataListHistory = [...this.unallocatedDataList].slice()
        // 删除选中数据
        this.hasSelectedList.forEach((item) => {
          const findIndex = this.allocatedDataList.findIndex((result) => {
            return result.userId === item.userId
          })
          if (findIndex !== -1) {
            this.allocatedDataList.splice(findIndex, 1)
          }
        })
      }
    },
    setItemAuth(row) {
      this.usersClickCache = Object.assign({}, row)
      this.getUnAllocatedListMethods(row.roleId)
      this.isShowGiveRoleAuth = true
    },
    getHasSetProjectPermission() {
      const params = {
        userId: this.usersClickCache.userId
      }

      service.getPermissionIds(params).then((res) => {
        let hasSelectedPermission = []
        // 根据id 查找list
        let selectedId = res.data.slice()

        selectedId.forEach((item) => {
          const findIndex = this.unallocatedDataListHistory.findIndex((result) => {
            return result.userId == item
          })

          if(findIndex !== -1) {
            hasSelectedPermission.push(this.unallocatedDataListHistory[findIndex])
          }
        })

        this.allocatedDataList = hasSelectedPermission.slice()
        this.allocatedDataListHistory = hasSelectedPermission.slice()
      })
    },
    getUnAllocatedListMethods(roleId) {
      const params = {
        // roleId: roleId
      }
      // unallocatedList
      service.getPersonList(params).then((res) => {
        res.data.rows = res.data.rows.filter((result) => {
          return result.userName !== 'admin'
        })
        this.unallocatedDataList = res.data.rows.slice()
        this.unallocatedDataListHistory = res.data.rows.slice()

        this.getHasSetProjectPermission()
      })
    },
    handleHasSelectedChange(val) {
      this.hasSelectedList = val.slice()
    },
    handleCanSelectionChange(val) {
      this.canSelectionList = val.slice()
    },
    confirmGiveRoleConfig() {
      let permissionUserId = []
      this.allocatedDataList.forEach((item) => {
        permissionUserId.push(item.userId)
      })

      const params = {
        userId: this.usersClickCache.userId,
        permissionUserId: permissionUserId.join(',')
      }

      service.setProjectPermission(params).then(() => {
        this.$message.success('操作成功')
        this.isShowGiveRoleAuth = false
        this.getPersonList()
      })
    },
    confirmMutiDel() {
      if (this.delPersonList.length === 0) {
        this.$message.error('请选择删除的人员')
        return
      }
      this.isShowWarning = true
    },
    changeSelectionList(val) {
      this.delPersonList = val.slice()
    },
    confirmMethods() {
      const params = {
        roleIds: []
      }
      if (Object.keys(this.personClickCache).length > 0) {
        params.userIds = [{id: this.personClickCache.id}]
      }

      if (this.delPersonList.length > 0) {
        const roleIdList = []
        this.delPersonList.forEach((item) => {
          roleIdList.push({
            id: item.id
          })
        })
        if (roleIdList.indexOf('1') !== -1) {
          this.$message.error('超级管理员不能删除啊')
          return
        }

        params.userIds = roleIdList
      }

      service.delNewUsers(params.userIds).then((res) => {
        this.personManagerSearch.page = 1
        this.$message.success('删除成功')
        this.isShowWarning = false
        this.resetDelData()
        this.delPersonList = []
        this.getPersonDataList()
        this.$refs.userListRef.clearSelectionMethods()
      })
    },
    // 重置删除数据
    resetDelData() {
      this.personClickCache = Object.assign({}, {})
    },
    cancelMethods() {
      this.isShowWarning = false
      this.resetDelData()
    },
    delPersonDetail(row) {
      console.log('点击删除 ---', row)
      this.personClickCache = Object.assign({}, row)
      this.isShowWarning = true
    },
    editPersonDetail(row) {
      this.usersAddrules.passWord[0].required = false
      this.usersAddrules.confirmPassword[0].required = false
      const params = {
        userId: row.id
      }
      service.getUsersByUserId(params).then((res) => {
        Object.keys(this.addPersonModel).forEach((item) => {
          this.addPersonModel[item] = res.data.users[item]
        })

        this.addPersonModel.passWord = ''

        this.addPersonModel.id = res.data.users.id
        if(res.data.users.userName === '超级管理员') {
          this.isCanEdit = true
        } else {
          this.isCanEdit = false
        }
        console.log('this.addPersonModel ---', this.addPersonModel)
        this.isShowAddPerson = true
      })
    },
    addNewUserMethods() {
      this.addPersonModel.userName = this.addPersonModel.userName.trim()
      this.addPersonModel.loginName = this.addPersonModel.loginName.trim()
      this.$refs['addUsersForm'].validate((valid) => {
        if (valid) {
          // if(!(/^1[3456789]\d{9}$/.test(this.addPersonModel.phone))){
          //   this.$message.error('请输入正确的手机号')
          //   return
          // }
          if(this.addPersonModel.passWord) {
            if (this.addPersonModel.passWord !== this.addPersonModel.confirmPassword) {
              this.$message.error('输入密码和确认密码不一致')
              return
            }
          }
          const params = Object.assign({}, this.addPersonModel)
          delete params.confirmPassword
          delete params.qrcode
          delete params.phone

          if (this.addPersonModel.id) {
            if (!params.passWord) {
              delete params.passWord
              service.editNewUsers(params).then((res) => {
                this.$message.success('修改成功')
                this.getPersonDataList()
                this.handleClose()
              })
            } else {
              params.passWord = md5(params.passWord)
              service.editNewUsers(params).then((res) => {
                this.$message.success('修改成功')
                this.getPersonDataList()
                this.handleClose()
              })
            }
          } else {
            params.passWord = md5(params.passWord)
            service.addNewUsers(params).then((res) => {
              this.$message.success('新增成功')
              this.getPersonDataList()
              this.handleClose()
            })
          }
        } else {
          return false
        }
      })
    },
    showPwd(model) {
      this[model] = !this[model]
    },
    getRoleList() {
      const params = {
        roleName: '',
        page: 1,
        pageSize: 20000000
      }
      service.getRoleList(params).then((res) => {
        console.log('res ---', res)
        this.roleList = res.data.records.filter((result) => {
          return result.roleId != 1
        })
      })
    },
    queryMethods() {
      this.personManagerSearch.page = 1
      this.getPersonDataList()
    },
    getPersonDataList() {
      this.isLoading = true
      const params = Object.assign({}, this.personManagerSearch)
      this.$refs.userListRef.queryData(params, () => {
        this.isLoading = false
      })
    },
    addNewPersonMethods() {
      this.usersAddrules.passWord[0].required = true
      this.usersAddrules.confirmPassword[0].required = true
      this.isShowAddPerson = true
    },
    handleClose() {
      this.isShowAddPerson = false
      this.addPersonModel = Object.assign({}, {
        loginName: '',
        passWord: '',
        userName: '',
        phone: '',
        confirmPassword: '',
        roleId: '',
        qrcode: ''
      })
      this.isShowGiveRoleAuth = false
      this.unallocatedDataList = []
      this.unallocatedDataListHistory = []
      this.allocatedDataList = []
      this.allocatedDataListHistory = []
      this.searchCanSelect = ''
      this.searchHasCanSelect = ''
      if (this.$refs.menuTree) {
        this.$refs.menuTree.setCheckedKeys([])
      }
      this.isShowAddRole = false
      this.isShowGiveRoleAuth = false
    },
    handleSizeChange(size) {
      this.personManagerSearch.page = size
      this.getPersonList()
    },
    handleCurrentChange(page) {
      this.personManagerSearch.page = page
      this.getPersonList()
    }
  }
}
</script>
<style scoped lang="scss">
    .role-manager-container{
      padding: 15px;
      background: #ffffff;
    }
    .page-nation{
        margin-top: 15px;
        text-align: right;
    }
    .add-person-input{
        width: 100%;
    }
    .el-icon-view{
        cursor: pointer;
    }
    .do-list {
      span {
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
        color: #409EFF;
        &.del-button{
          color: #F56C6C;
        }
      }
    }

    .give-role-auth-container{
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    .icon-big{
      display: block;
      font-size: 36px;
      cursor: pointer;
      position: relative;
      top: 79px;
    }
    .big-icon{
      font-size: 42px;
    }
    .selection-table{
      margin-top: 15px;
    }
    .give-title{
      margin-bottom: 15px;
    }

    .chanshuo-arrow-row{
      position: relative;
      top: 120px;
      div{
        margin-top: 20px;
      }
      img{
        width: 48px;
        height: 48px;
        display: block;
        margin-top: 15px;
      }
    }

    .float-ryfp-tips{
      position: absolute;
      left: 20px;
      bottom: 20px;
      color: #F56C6C;
      font-size: 14px;
    }
</style>
